<template>
  <div>
    <button @click="toggleComponent">Toggle Component</button>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
// 参考：
// vue的component标签用法
// https://blog.csdn.net/qq_44063746/article/details/130659229

import ComponentA from '../components/ComponentA.vue'
import ComponentB from '../components/ComponentB.vue'

export default {
  data() {
    return {
      currentComponent: 'ComponentA',
    }
  },
  methods: {
    toggleComponent() {
      this.currentComponent =
        this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA'
    },
  },
  components: {
    ComponentA,
    ComponentB,
  },
}
</script>

<style lang="scss" scoped></style>
